<template>
    <div ref="chartRef" style="width: 100%; height: 500px"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

// 引用图表容器
const chartRef = ref<HTMLDivElement | null>(null)

onMounted(() => {
    if (chartRef.value) {
        const chartDom = chartRef.value
        const myChart = echarts.init(chartDom)

        const option = {
            title: {
                text: '销售漏斗',
                left: 'left', // 标题位置设为左侧
                top: 'top' // 标题位置设为顶部
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c}%'
            },
            toolbox: {
                orient: 'vertical',
                top: 'center',
                feature: {
                    saveAsImage: {} // 仅保留保存为图片功能
                }
            },
            legend: {
                show: false // 取消图例显示
            },
            series: [
                {
                    name: 'Funnel',
                    type: 'funnel',
                    width: '60%',
                    height: '90%',
                    left: '30%',
                    top: '10%',
                    sort: 'descending', // 开口朝下，设置排序方式为 descending
                    label: {
                        show: true,
                        position: 'right', // 将数据标签显示在右侧
                        formatter: '{b}: {c}%' // 格式化标签显示，{b} 为名称，{c} 为数据
                    },
                    data: [
                        { value: 2500, name: '输单' },
                        { value: 10000, name: '成交' },
                        { value: 12000, name: '拟定合同' },
                        { value: 15000, name: '商务谈判' },
                        { value: 25000, name: '方案报价' },
                        { value: 35000, name: '确认需求' },
                        { value: 50000, name: '初次洽谈' }
                    ]
                }
            ]
        }

        myChart.setOption(option)
    }
})
</script>

<style scoped>
#chartRef {
    width: 100%;
    height: 400px;
}
</style>
